<template>
  <dev>
    <div id="header">
      <h2>射频管家</h2>
      <span id="span1">v2.7</span><img @click="add" id="img1" src="http://pic.616pic.com/ys_b_img/00/05/00/1KipJChKDl.jpg"/>
    </div>
    <model 
      @cancel="showModel=false" 
      :show-model="showModel" 
      :show-data-list="showCpm"
      :data-type="dataType"
      :id="modelId"
    />
    <ul id="main" >
      <dev class="yuan" v-for="item in rfData" :key="item.id">
        <line-tag
          :id="item.id"
          :title="item.title"
          :remark="item.remark"
          :image-url="item.imageUrl"
        />
      </dev>
    </ul>
  </dev>
</template>
<script>
import lineTag from "@/xtviews/home/lineTag";
// import notifyMessageJs from '@/api/util/notifyMessageJs'
import model from '@/components/util/model'

export default {
  name: "HomeIndex",
  components: {
    lineTag,
    model
  },
  data() {
    return {
      rfData: [],
      dataIndex: 0,
      showCpm: [],
      dataType: "remark",
      showModel: false,
      modelId: -1
    };
  },
  created() {
    // 初始化数据 (后期调用接口动态获取数据)
    this.rfData = [
      {
        id: 0,
        title: "这是标题1",
        remark: "这个是备注1",
        imageUrl: "http://pic.616pic.com/ys_img/00/53/68/75kH2xlULm.jpg",
      },
      {
        id: 1,
        title: "这是标题2",
        remark: "这个是备注2",
        imageUrl: "http://pic.616pic.com/ys_img/00/95/63/miOGK1aJLe.jpg",
      },
    ];
    this.dataIndex = this.dataIndex + 2;
  },
  methods: {
    getRfData() {},
    add() {
      console.log("add()方法以调用");
      // this.rfData.push({
      //   id: this.dataIndex,
      //   title: "这是标题3",
      //   remark: "这个是备注3",
      //   imageUrl: "http://pic.616pic.com/ys_img/00/95/63/miOGK1aJLe.jpg",
      // });
      // this.dataIndex = this.dataIndex + 1;
      this.showPopup([
        {"name":"标题", "default": "", "type": "text", "verify": null},
        {"name":"备注", "default": "", "type": "text", "verify": null}
      ], "add", -1)
    },
    delTag(id) {
      // console.log("12slot-scope")
      // var yuan= document.getElementsByClassName("yuan");
      // for(var i=0;i<yuan.length;i++){
      //     yuan[i].index=i;
      //        yuan[i].onclick = function(){
      //        document.getElementsByClassName("yuan")[this.index].remove() ;
      //     }
      // }
      // console.log(id);
      // console.log(typeof id);
      // var obj = this.rfData.find(r => r.id === id);
      // this.$confirm('确定删除该行吗？', '删除', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      //   callback: action => {
      //     if (action === 'confirm') {
      //       this.$message.succeed("删除成功")
      //     }
      //   }
      // });
      // this.rfData.re
      // var a = 0;
      // for(var i = 0; i<this.rfData.length; i++) {
      //     if(this.rfData[i].id = id) {
      //         a = i;
      //     }
      // }
      // console.log(a);
      // var obj = this.rfData.find(r => r.id === parseInt(id));

      this.rfData = this.rfData.filter((r) => r.id !== parseInt(id));
      // this.rfData.splice(parseInt(id), 0);

      this.$myMsg.notify({
        content: "删除成功",
        type: "success",
        noNotifyBtn: false,
        time: 3000,
      });
    },
    dataRemark(id) {
      var obj = this.rfData.find((r) => r.id === parseInt(id));
      // var remarkData = prompt("请传入新的备注", obj.remark);
      // if (remarkData !== null) {
      //   obj.remark = remarkData;
      //   this.$myMsg.notify({
      //       content: "备注成功",
      //       type: "success",
      //       noNotifyBtn: false,
      //       time: 3000,
      //   });
      // }
      this.showPopup([
        {"name":"备注", "default": obj.remark, "type": "text", "verify": null}
      ], "remark", id)
    },
    showPopup(objList, dataType, id) {
      this.showCpm = objList;
      this.showModel = true;
      this.dataType = dataType;
      this.modelId = id
    },
    modelCallBack(dataList, dataType, id) {
      this.showModel = false
      if(dataType === 'remark') {
        var obj = this.rfData.find((r) => r.id === parseInt(id));
        obj.remark = dataList[0].default
      } else if(dataType === 'add') {
        this.rfData.push({
          id: this.dataIndex,
          title: dataList[0].default,
          remark: dataList[1].default,
          imageUrl: "http://pic.616pic.com/ys_img/00/95/63/miOGK1aJLe.jpg",
        });
        this.dataIndex = this.dataIndex + 1;
      }
    }
  },
};
</script>
<style>
/* 头部 */
  #header{
    display: inline-block;
    width: 100%;
  }

/* 添加按钮的样式 */
#img1 {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 34px;
  margin-left: 30%;
  border-radius: 50%;
}

/* 射频管家 */
h2{
  display: inline-block;
  float: left;
}

/* v2.7的样式 */
#span1{
  float: left;
  margin-top: 34px;
  margin-left: 10px;
}

#main {
  overflow: scroll;
  background-color: white;
  width: 100%;
  height: 500px;
  display: block;
  border-radius: 15px;
}


</style>
